<template>
  <div class="message" slot="body">
    <Header></Header>

    <el-tabs v-model="message_type" class="message-card">
      <el-tab-pane label="求职情况" name="a">

        <el-card v-for="i in resume_list" :key="i" style="margin-top: 10px;width: 950px">
          <el-row>

            <el-col :span="12">
              <div @click="job_detail(i)" style="cursor: pointer">
                <el-row
                  style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #E6A23C;margin-top: 5px">
                  <span>{{i.title}}</span>
                </el-row>
                <el-row style="margin-top: 20px;color: #F56C6C;"><span>{{i.money}}</span></el-row>
              </div>
              <el-row @click.native="company_detail(i)"
                      style="cursor: pointer;margin-top: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #409EFF;">
                <span>{{i.company}}</span>
              </el-row>
            </el-col>

            <div>
              <el-col :span="12" style="text-align: right">
                <el-row>
                  <el-tag type="success"><span style="font-size: 16px">{{i.auditStatus}}</span></el-tag>
                </el-row>
                <el-row style="margin-top: 20px;color: #909399;font-size: 15px">
                  <span>投递时间: {{i.createTime}}</span>
                </el-row>
                <el-row style="margin-top: 20px;color: #909399;font-size: 15px">
                  <span>反馈时间: {{i.updateTime}}</span>
                </el-row>
              </el-col>
            </div>

          </el-row>
        </el-card>

        <el-card style="width: 270px;position: absolute;top: 10px;right: 0px">
          <div slot="header" class="clearfix" style="text-align: center">
            <span>推荐职位</span>
          </div>
          <div v-for="(i,index) in recommend_list" :key="index" v-if="index<2" >
            <div @click="job_detail(i)" style="cursor: pointer">
              <el-row
                style="margin: 5px 0px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #E6A23C;">
                {{i.title}}
              </el-row>
              <el-row style="color: #F56C6C;">{{i.money}}</el-row>
            </div>
            <el-row @click.native="company_detail(i)"
                    style="cursor: pointer;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #409EFF;">
              {{i.company}}
            </el-row>
            <el-divider></el-divider>
          </div>
        </el-card>

      </el-tab-pane>

      <el-tab-pane label="聊天信息" name="b">
        <el-row style="margin-top: 10px;">
          <el-col :span="6">
            <el-card>
              <el-table class="message-table"
                        :data="tableData"
                        height="520"
                        border
                        :show-header=false
                        style="width: 100%;">
                <el-table-column
                  prop="info_list"
                  label="信息列表">
                  <template slot-scope="scope">
                    <el-row>
                      <el-col :span="6"><img :src="require('../assets/logo.png')"
                                             style="width: 50px;height: 50px;border-radius: 50%">
                      </el-col>
                      <el-col :span="9">
                        <el-row><span style="font-size:15px">{{ scope.row.name}}</span>
                          <el-badge :value="scope.row.num" class="item"></el-badge>
                        </el-row>
                        <el-row style="margin-top: 5px;color: #909399;font-size:13px">{{ scope.row.company}}</el-row>
                      </el-col>
                      <el-col :span="8"><span style="color: #909399">{{ scope.row.date}}</span></el-col>
                      <el-col :span="1"><i class="el-icon-delete"></i></el-col>
                    </el-row>

                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
          <el-col :span="18">
            <el-card>
              <div slot="header" class="clearfix">
                <span>小邓 | </span>
                <span style="color: #409EFF;cursor: pointer" @click="company_detail(1)">哇啦技术有限公司</span> |
                <span style="cursor: pointer" @click="job_detail(1)">
                  <span style="color: #E6A23C;">哇啦软件工程师</span>
                  <span style="color: #F56C6C;">(4-8k)</span>
                </span>
              </div>
              <el-table class="message-table"
                        :data="message_list"
                        height="285"
                        :show-header=false
                        style="width: 100%;">
                <el-table-column
                  prop="id"
                  label="信息">
                  <template slot-scope="scope">
                    <span v-if="scope.row.create_by=='111'" style="float: right">
                      {{scope.row.data}} <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                                              style="width: 30px;height: 30px;border-radius: 50%">
                    </span>
                    <span v-else style="float: left">
                      <img :src="require('@/assets/logo.png')" style="width: 30px;height: 30px;border-radius: 50%"> {{scope.row.data}}
                    </span>
                  </template>
                </el-table-column>
              </el-table>

              <div>
                <!--                <div id="editor"></div>-->
                <el-form>
                  <el-input type="textarea" v-model="new_message" :rows="6"></el-input>
                  <el-button type="success" size="small" style="float: right;margin: 5px 0px" @click="send()">发送
                  </el-button>
                </el-form>


              </div>

            </el-card>
          </el-col>
        </el-row>

      </el-tab-pane>
    </el-tabs>

    <Footer></Footer>
  </div>
</template>

<script>
  import Header from './Header'
  import Footer from './Footer'
  import E from 'wangeditor'

  export default {
    name: 'Message',
    components: {Header, Footer},
    created () {
      this.$axios.post('http://localhost:8081/job/selectByJob', {
        'tag': 1,
      }).then((res) => {
        const result = res.data
        this.recommend_list = result.data.reverse()
      })
      if (this.$session.get('user') == null) {
        this.$message('请登录')
        setTimeout(() => {
          this.$router.push('/login')
        }, 500)
      }
    },
    data () {
      return {
        // 富文本控制器
        editor: '',
        // 消息默认标签页
        message_type: 'b',
        // 发送的新消息
        new_message: '',
        recommend_list: [],
        resume_list: [
          {title: "开发工程师", money: '15-30K', company: '深圳市腾讯有限公司', createTime: '2022-05-13', updateTime: '暂未反馈', auditStatus: '待查看'},
          {title: "哇啦技术研发", money: '8-10k', company: '哇啦有限公司', createTime: '2022-05-03', updateTime: '2022-05-04', auditStatus: '通过'}
        ],
        // 聊天信息列表
        tableData: [{
          id: '1',
          name: '邓先生',
          company: '哇啦技术',
          picture: 'https://img.bosszhipin.com/beijin/upload/com/workfeel/20220316/7bf6f160950405e9282fe33181a1523803562870c4e2cc4a242ac4eb7bbd10d1694083156ab76fdb.jpg?x-oss-process=image/resize,w_120,limit_0',
          date: '2022-05-03',
          num: ''
        }, {
          id: '2',
          name: '小邓',
          company: '腾讯',
          picture: 'https://img.bosszhipin.com/beijin/upload/com/workfeel/20220316/7bf6f160950405e9282fe33181a1523803562870c4e2cc4a242ac4eb7bbd10d1694083156ab76fdb.jpg?x-oss-process=image/resize,w_120,limit_0',
          date: '2022-05-01',
          num: '12'
        }],
        // 具体的消息列表
        message_list: [{
          id: '1',
          data: '您好',
          create_by: '111',
        }, {
          id: '2',
          data: '你好',
          create_by: '22',
        },],
      }
    },
    methods: {
      send () {

        this.message_list.push({
          id: '3',
          data: this.new_message,
          create_by: '111',
        })
        this.new_message = ''
        // console.log(this.new_message)
      },
      job_detail (id) {
        this.$router.push({path: 'job_detail', query: {id: id}})
      },
      company_detail (id) {
        this.$router.push({path: 'company_detail', query: {id: id}})
      },
      editor_init () {
        this.editor = new E('#editor')
        this.editor.config.height = 130
        this.editor.config.menus = [
          'bold',
          'italic',
          'underline',
          'fontSize',
          'foreColor',
          'backColor',
          'emoticon',
          'image',
        ]
        this.editor.create()
      }
    },
    mounted () {
      this.editor_init()
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .message-card {
    width: 1250px;
    margin-left: 8%;
  }

  .message-table >>> .el-table__row > td {
    border: none;
  }

  .toolbar {
    border: 1px solid #ccc;
  }

  .text {
    border: 1px solid #ccc;
    min-height: 400px;
  }
</style>
